<template>
  <div>
    <el-form
      :model="formData"
      inline
      style="display: flex;justify-content: flex-end;margin-top: 10px;">
      <el-form-item prop="username">
        <el-input v-model="formData.username" placeholder="请输入管理员名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="search" type="primary">查找</el-button>
        <el-button @click="openDialog('创建','add', null)" type="primary">添加</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="tableLoading" :data="tableData" border>
      <el-table-column align="center" label="管理员ID" prop="id"></el-table-column>
      <el-table-column align="center" label="管理员名称" prop="username"></el-table-column>
      <el-table-column align="center" label="管理员头像" prop="avatar">
        <template slot-scope="scope">
          <img :src="scope.row.avatar" width="80">
        </template>
      </el-table-column>
      <el-table-column align="center" label="管理员角色" prop="roleIds">
               <template slot-scope="scope">
               <el-tag v-for="item in scope.row['roleIds'] " :key="item.value" >
                 {{item | tableFilter(userOptions)}}
               </el-tag>
               </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button @click="openDialog('编辑', 'edit', scope.row)" type="primary">编辑</el-button>
          <el-button @click="deleteData(scope.row)" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.page"
      :page-sizes="[10, 20, 30, 50, 100]"
      :page-size="pageInfo.limit"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total">
    </el-pagination>

    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogTitle"
      width="500">
      <el-form ref="dialogForm" :rules="formRules" :model="dialogFormData" label-width="100px">
        <el-form-item label="管理员名称" prop="username">
          <el-input v-model="dialogFormData.username"></el-input>
        </el-form-item>
        <el-form-item label="管理员密码" prop="password">
          <el-input type="password" v-model="dialogFormData.password"></el-input>
        </el-form-item>
        <el-form-item>
         <el-form-item label="管理员头像" prop="avatar">
           <!--  1.action属性http://192.168.200.251:8888/admin/storage/create  -->
           <!-- 2.headers --- :headers="{'Shopping-Admin-Token': token}" -->
           <!-- 3.回调函数赋值 -->
            <el-upload class="avatar-uploader"
            action="http://192.168.200.251:8888/admin/storage/create"
            :show-file-list="false"
            :on-success="avatarSuccess"
            :headers="{'Shopping-Admin-Token': token}">
            <img v-if="dialogFormData.avatar" :src="dialogFormData.avatar" style="width:100px;">
            <i
              v-else
              class="el-icon-plus avatar-uploader-icon"
              style="width:100px;height: 100px;border-radius: 10px;border: 2px dashed #ddd;line-height: 100px;"
            >
            </i>
            </el-upload>
          </el-form-item>
        </el-form-item>

        <el-form-item  label="管理员角色"  prop="roleIds">
          <el-select v-model="dialogFormData.roleIds" multiple placeholder="请选择">
            <el-option
              v-for="item in userOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option >           
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button @click="confirm" type="primary">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
export default {
 name: 'adminUser',
  componentTitle: '管理员',
  data () {
    return {
      token:sessionStorage.getItem('Shopping-Admin-Token'),
      tableLoading: false,
      dialogVisible: false,
      dialogTitle: '创建',
      dialogType: 'add',
      dialogFormData: {
        password:'',
        username: '',
        avatar:'',
        roleIds:[]
      },
      pageInfo: {
        page: 1,
        limit: 10,
        total: 0
      },
      formData: {
        id: '',
        username:'',
      },
      tableData: [],
      formRules: {
        username: [
          {required: true, message: '请输入管理员名称', trigger: 'change'}
        ],
      },
      userOptions:[
        {label:"超级管理员",value:1},
        {label:"商场管理员",value:2},
        {label:"推广管理员",value:3},
],
    }
  },
  mounted () {
    this.search()
  },
   filters: {
    tableFilter(value, options) {
      let index = options.findIndex((item) => {
        return Number(item.value) === Number(value);
      });

      if (index < 0) {
        return "---";
      } else {
        return options[index].label;
      }
    },
  },
  methods: {
    openDialog (title, type, row) {
      this.dialogVisible = true
      this.dialogType = type
      this.dialogTitle = title

      if (type === 'edit') {
        this.$nextTick(() => {
          this.dialogFormData = Object.assign({}, row)
        })
      }
    },
    confirm () {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          if (this.dialogType === 'add') {
            this.addData()
          } else if (this.dialogType === 'edit') {
            this.editData()
          }
        } else {
          return false
        }
      })
    },
    cancel () {
      this.$refs.dialogForm.resetFields()
      this.dialogVisible = false
    },
      avatarSuccess (res, file) {
      // 
     // this.dialogFormData.avatar = res.data.url.replace(/localhost:8888/g, 'c37g909045.zicp.vip')
       this.dialogFormData.avatar = res.data.url.replace(/localhost:8888/g, '192.168.200.251:8888')
    },
    // 添加接口
    addData () {
      axios({
        url: 'http://192.168.200.251:8888/admin/admin/create',
        method: 'post',
        data: {
        ...this.dialogFormData
        },
        headers: {
          'Shopping-Admin-Token': sessionStorage.getItem('Shopping-Admin-Token')
        }
      }).then(res => {
        if (res.data.errno === 0) {
          this.cancel()
          this.$notify.success({title: '添加成功'})
          this.search()
        } else {
          this.$notify.error({title: '添加失败',message:res.data.error})
        }
      })
    },
    // 编辑接口
    editData () {
      axios({
        url: 'http://192.168.200.251:8888/admin/admin/update',
        method: 'post',
        data: {
          ...this.dialogFormData
        },
        headers: {
          'Shopping-Admin-Token': sessionStorage.getItem('Shopping-Admin-Token')
        }
      }).then(res => {
        if (res.data.errno === 0) {
          this.cancel()
          this.$notify.success({title: '编辑成功'})

          this.search()
        } else {
          this.$notify.error({title: '编辑失败'})
        }
      })
    },
    deleteData (row) {
      this.$confirm('此操作将删除该问题, 是否继续?').then(() => {
        axios({
          url: 'http://192.168.200.251:8888/admin/admin/delete',
          method: 'post',
          data: row,
          headers: {
            'Shopping-Admin-Token': sessionStorage.getItem('Shopping-Admin-Token')
          }
        }).then(res => {
          this.$notify.success({title: '删除成功'})
  
          this.search()
        })
      })
    },
    search () {
      this.tableLoading = true

      axios({
        url: 'http://192.168.200.251:8888/admin/admin/list',
        method: 'get',
        params: {
          page: this.pageInfo.page,
          limit: this.pageInfo.limit,
          ...this.formData,

        },
        headers: {
          'Shopping-Admin-Token': sessionStorage.getItem('Shopping-Admin-Token')
        }
      }).then(res => {
        this.tableLoading = false
        this.tableData = res.data.data.list

        this.pageInfo.total = res.data.data.total
        console.log('ss',res)
      })
    },
    // 每页多少条切换
    handleSizeChange (value) {
      this.pageInfo.limit = value

      this.search()
    },
    // 当前页码的切换
    handleCurrentChange (value) {
      this.pageInfo.page = value

      this.search()
    }
  }
}
</script>
